<template>
    <div class="od">
        <h2>订单详情</h2>
        <div class="oddd">
            <div class="dd"> 
                订单编号：
                <div class="odd">
                    {{oid}}
                </div>
            </div>
            <div class="dd">
                创建时间：
                <div class="odd">
                    {{stime}}
                </div>
            </div>
            <div style="width: 300px;margin-left:125px;margin-top: 5px;margin-bottom: 5px;">
                <el-table
                    :data="glist"
                    height="100"
                    border
                    style="width: 100%">
                    <el-table-column
                    prop="name"
                    label="商品名称"
                    width="150">
                    </el-table-column>
                    <el-table-column
                    prop="num"
                    label="购买数量"
                    >
                    </el-table-column>
                </el-table>
                <!-- <tr v-for="(order,index) in glist" :key="index">
                    <td width="60%">
                        <div>
                            商品名称： {{order.name}}
                            购买数量：{{order.num}}
                           
                        </div>
                        <br/>
                    </td>
                </tr>      -->
            </div>
            <div class="dd"> 
                订单类型：
                <div class="odd">
                    {{oType}}
                </div>
            </div>
            <div class="dd"> 
                支付金额：
                <div class="odd">
                    {{money}}￥
                </div>
            </div>
            <div class="dd"> 
                卖家姓名：
                <div class="odd">
                    {{uname}}
                </div>
            </div>
            <div class="dd"> 
                卖家电话：
                <div class="odd">
                    {{uphone}}
                </div>
            </div>
            <div class="dd"> 
                买家姓名：
                <div class="odd">
                    {{bname}}
                </div>
            </div>
            <div class="dd"> 
                买家电话：
                <div class="odd">
                    {{bphone}}
                </div>
            </div>
            <div class="dd"> 
                收件地址：
                <div class="odd">
                    {{baddress}}
                </div>
            </div>
            <div class="dd"> 
                订单状态：
                <div class="odd">
                    {{OState}}
                </div>
            </div>
            <div class="dd"> 
                完成时间：
                <div class="odd">
                    {{etime}}
                </div>
            </div>
            <div class="btn">
            <el-button type="primary" size="small" @click="back">返回上一级</el-button>
            <el-button type="primary" size="small" @click="back2">返回主页</el-button>
              <el-button type="primary" size="small" @click="back3">申请售后</el-button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'Order',
    data() {
      return {
        oid:'',
        stime:'',
        gname:'',
        gquantity:'',
        uname:'',
        uphone:'',
        bname:'',
        bphone:'',
        baddress:'',
        ostate:'',
        etime:'',
        gid:'',
        uid:'',
        otype:'',
        money:'',
        glist:[]
        }
    },
    methods:{
        back(){
            this.$router.go(-1)
        },
        back2(){
            this.$router.push('/goods');
        },
        back3(){
          this.$router.push('/aftersales');
        },
        getOrder(){
            this.$axios.get('/api/getOrderByOid',{
                params:{
                    oid:this.oid
                }
            }).then(res =>{
                console.log(res.data)
                this.stime= res.data.data.info.stime;
                this.bname=res.data.data.info.bname;
                this.bphone=res.data.data.info.bphone;
                this.baddress=res.data.data.info.baddress;
                this.ostate=res.data.data.info.ostate;
                this.uid=res.data.data.glist[0].uid;
                this.gid=res.data.data.glist[0].gid;
                this.etime=res.data.data.info.etime;
                this.otype=res.data.data.info.otype;
                this.money=res.data.data.info.money;
                this.uname=res.data.data.seller.nickname;
                this.uphone=res.data.data.seller.uphone;
                this.glist=res.data.data.glist;
              }).catch(error =>{
               // console.log('提交失败')
                console.log(error )
              })
        },
        getOid(){
            this.oid=this.$route.query.oid
        }
    },
    mounted(){
        this.getOid();
        this.getOrder();
    },
    computed:{
        OState(){
            if(this.ostate===0){
                return '客户下单'
            }else if(this.ostate===1){
                return '交易完成'
            }else if(this.ostate===2){
                return '商家确认'
            }else if(this.ostate===3){
                return '备货完成'
            }else if(this.ostate===4){
                return '开始发货'
            }else if(this.ostate===-1){
                return '取消订单'
            }else{
                return ''
            }
        },
        oType(){
            if(this.otype===0){
                return '购买'
            }else if(this.otype===1){
                return '租借'
            }else{
                return 
            }
        }
    },
}
</script>
<style >
    .od{
        width:500px;
        margin:0 auto;
        text-align: center;
        height:510px;
        line-height:20px;
        margin-top:50px;
        border-style:solid;
        border-width:1px;
        border-color:grey;
        padding-bottom: 50px; 
    }
    .odd{
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        line-height:30px;
        width: 300px;
        margin-top:5px;
    }
    .oddd{
        line-height:20px;
    }
    .dd{
        display: flex;
        justify-content: center;
    }
    h2{
        margin-bottom: 10px;
        margin-top: 10px;
    }
    .btn{
        padding: 10px;
    }
</style>
